<template>
  <div>
    <!-- 搜索组件 -->
    <my-search @parentsearch="parentSearch"/>
    <!-- 新增组件 -->
    <my-add @opendilaogfun="parentopendilaog" />
    <!-- 表格组件 -->
    <my-table @opendialog="parentopendialog" @resetTable="resettable" :myarr="arr" />
    <!-- 分页组件 -->
    <my-page 
    @changePageSize="parentpageSize" 
    @changePage="parentpage" 
    :page="page" 
    :pageSize="pageSize" 
    :total="total"/>
    <!-- 弹框组件 -->
    <Dialog :dialogType="dialogType" :row="row" @resettable="resettable" @closeDialog="show=false" v-if="show"/>
  </div>
</template>

<script>
import MySearch from './components/MySreach.vue'
import MyTable from './components/MyTable.vue'
import MyPage from './components/MyPage.vue'
import MyAdd from './components/MyAdd.vue'
import Dialog from './components/Dialog.vue'
import { getPoliceofficerApi } from '../../api/PoliceofficerApi'

export default {
components:{
  MySearch,
  MyTable,
  MyPage,
  MyAdd,
  Dialog
},
data(){
  return{
    arr:[],
    keyword:'',//搜索 
    page:1,//默认当前页是第一页
    pageSize:10,//默认每页显示10条数据
    total:0,
    show:false,
    row:{},
    dialogType:0
  }
},
mounted(){
  this.initHome()
},
methods:{
  parentopendialog(row){
    //修改
    this.row = row
    this.dialogType = 1
    this.show = true
  },
  resettable(){
    this.initHome()
    this.show = false
  },
  parentopendilaog(){//添加的第一步,打开弹框
        this.row = {}
        this.dialogType = 0
        this.show = true
  },
  parentpageSize(val){//切换pagesize事件
    this.pageSize = val
    this.page = 1
    this.initHome()
  },
  parentpage(val){//切换页码事件
    this.page = val
    this.initHome()
  },
  parentSearch(val){
    this.keyword = val
    this.initHome()
  },
  // parsea(val){
  //   this.keyword = val
  //   this.initHome()
  // },
  initHome(){
    var params = {
      keyword:this.keyword,
      page:this.page,
      pageSize:this.pageSize,
      
    }
    getPoliceofficerApi(params).then(res=>{
      // console.log(res);
      if(res.code == 200){
        this.arr = res.data
        this.total = res.total
      }
    })
  }
}


}
</script>

<style>

</style>